<script setup>
import VepD4FormInput from "@/views/vepDev2/vepD4FormInput.vue";
import ItemWrap from "@/components/item-wrap";
import {storeToRefs} from "pinia";
import {useVepDataStore} from "@/stores/vep";
import VepD4RegionYearXiu from "@/views/vepDev2/vepD4RegionYearXiu.vue";
import VepDialog from "@/views/vepDev2/vep-dialog.vue";
import {onUnmounted, watch} from "vue";
import {useRouter} from "vue-router";
import VepD4show from "@/views/vepDev2/vepD4show.vue";
const vepDataStore = useVepDataStore();

const {
  isSubmitted,
} = storeToRefs(vepDataStore);

const router = useRouter();

watch(isSubmitted, () => {
  console.log('刷新',isSubmitted.value)
  if (isSubmitted.value === false) {
    // 用刷新页面代替
    // window.location.reload();
    router.push('/vepCalcDevNan');
    setTimeout(() => {

      console.log('tiaozhuan',isSubmitted.value)
      router.push('/vepCalcDev');
    }, 300);
  }
  // router.push('/homepage');

})
onUnmounted(() => {
  console.log("清除vep输入")
  vepDataStore.reset()
})
</script>

<template>

  <!--    使用gep的布局 -->

  <!--    最外层layer1  左右布局 -->
  <div class="vepD4-index-box">
    <!--    最外层layer1  左半部分 -->
    <div class="vepD4-layer1-left">
      <div class="vepD4-layer2-left-top">
        <vep-d4-region-year-xiu/>
      </div>

      <el-dialog v-model="isSubmitted" style="border-radius: 8px; box-shadow: 3px 3px 10px 10px #3b3c3e; background: #060f39;"
                 width="70%"
                 align-center
      >
        <vep-dialog/>
      </el-dialog>


      <div class="vepD4-layer2-left-bottom">
        <!-- 根据表单提交状态显示不同的组件 -->
        <dv-border-box10  :color="['#3adabf', '#1f9e8b']">
          <vep-d4show/>
        </dv-border-box10>

      </div>

    </div>
    <!--    最外层layer1  右半部分 -->
    <div class=" vepD4-layer1-right">
      <!--      <gep-d4-layer1-right/>-->
      <vep-d4-form-input/>
      <!--      <vep-d4-form-input-test/>-->
    </div>

  </div>


</template>

<style scoped>
/*      第一层     */
.vepD4-index-box {
  width: 100%;
  height: calc(100% - 100px);
  display: flex;
  justify-content: space-between;
}

.vepD4-layer1-left {
  width: 100%;
  height: 100%;
  flex: 3;
  display: flex;
  flex-direction: column;
  /*background: url("@/assets/img/bg/6.jpeg") no-repeat center center fixed;*/
}

.vepD4-layer1-right {
  width: 100%;
  height: 100%;
  flex: 2;
}

.vepD4-layer2-left-top {
  height: 150px;
  /*border: 1px red solid;  height: 22%;*/

}

.vepD4-layer2-left-bottom {
  flex: 1;
  width: calc(100% - 40px);
  height: calc(100% - 60px);
  margin: 20px 20px;

}






</style>
